<!-- 精选好茶页 -->
<template>
  <div class="sift-tea">
    <div class="sift-title">
      <h2>精选好茶</h2>
    </div>
    <div class="sift-list">
      <router-link
        tag="div"
        :to="`/goodsdetail/${item.id}`"
        class="sift-item"
        v-for="item in siftTeaList"
        :key="item.id"
      >
        <div class="imgBox">
          <img :src="item.img" alt="" />
        </div>
        <div class="main">
          <div class="item-title line-ellipsis">
            {{ item.title }}
          </div>
          <div class="item-price">
            <div class="price">￥{{ item.price }}</div>
            <div
              class="shopping-car-icon"
              @click="addGoods(item.id, userId)"
            ></div>
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import { getsiftTea } from "@/api/inedx";
export default {
  data() {
    return {
      siftTeaList: [],
    };
  },
  methods: {
    async getsiftTeaList() {
      let { data } = await this.$http(getsiftTea());
      this.siftTeaList = data.data;
    },
  },

  mounted() {
    this.getsiftTeaList();
  },
};
</script>

<style lang="scss" scoped>
.sift-tea {
  width: 100vw;
  background-color: #fff;
  padding-bottom: 0.625rem;
  .sift-title {
    width: 100%;
    text-align: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #cecccc;
    h2 {
      font-size: 18px;
    }
  }
  .sift-list {
    width: 100vw;
    overflow-x: scroll;
    display: flex;
    &::-webkit-scrollbar {
      display: none;
    }
    .sift-item {
      width: 7.5rem;
      margin-left: 0.625rem;
      margin-top: 0.625rem;
      .imgBox {
        img {
          width: 100%;
        }
      }
      .main {
        padding: 0.5rem 0.25rem;
        background-color: #f4f4f4;
        .item-title {
          font-size: 12px;
        }
        .item-price {
          font-size: 12px;
          color: #56bb37;
          margin-top: 0.25rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }
}
</style>
